<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }
  </style>
</head>
<body>
  <div id="app" class="content">
    <div id="example">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
      <p>{{fullName}}</p>
    </div>
  </div>
  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>
    var data = {
      message: '123456789',
      firstName: 'Foo',
      lastName: 'Bar'
    }

    var app = new Vue({
      el: "#app",
      data: data,
      computed: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        },
        // 依赖data里面属性求值，最好用computed，用methods 只要发生重新渲染，method 调用总会执行该函数。
        fullName: function() {
          return this.firstName + ' ' + this.lastName;
        }
      }
    });
  </script>
</body>
</html>
